{% extends "base.html" %}
{% load staticfiles %}

{% block title %}
登录
{% endblock %}

{% block style %}
<link rel="stylesheet" href="{% static 'css/login.css' %}">
{% endblock %}

{% block nav_home_active %}
active
{% endblock %}

{% block content %}
<div class="container">
    <div class="row">
        <div class="col-sm-4 col-sm-offset-4">
            {%if request.user.is_authenticated %}
            <div class="had_login">
                <p>已注册，<span id="redirect">5</span>秒后跳转到首页...</p>
            </div>
            <script>
                var t = 4
                var t1 = setInterval(() => {
                    $("#redirect").text(t)
                    t -= 1
                }, 1000);
                setTimeout(function () {
                    clearInterval(t1)
                    window.location.href = '/'
                }, 5000)
            </script>
            {% else %}
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">注册</h3>
                </div>
                <form action="" method="POST">
                    <div class="panel-body">
                        {% csrf_token %}
                        {% for field in reg_form %}
                        <div class="form-group">
                            <label for="{{ field.id_for_label }}">
                                {{ field.label }}
                            </label>
                            {% if field.name == 'verification_code' %}
                            {{ field }}<input type="button" value="发送验证码" id="send_code" class="btn btn-info">
                            {% else %}
                            {{ field }}
                            {% endif %}
                            <p class="text-danger">
                                {{ field.errors.as_text }}
                            </p>
                        </div>
                        {% endfor %}
                        <span id="tip" class="text-danger">
                            {{ reg_form.non_field_errors.as_text }}
                        </span>
                    </div>
                    <div class="clearfix"></div>
                    <div class="panel-body">
                        <button type="submit" id="btn_register" class="btn btn-primary pull-right"
                                title="请先填写验证码">注册</button>
                    </div>
                </form>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}
{% block script_extend %}
<script>
    $("#btn_register").addClass('disabled')
    $("#btn_register").attr('disabled', true)
    $("#send_code").click(function () {
        $("#tip").text("")
        // 把验证码字段改为必填字段
        $("#id_verification_code").attr({ required: true })
        var username = $("#id_username").val()
        if (username == "") {
            $("#tip").text("* 用户名称不能为空")
            return false
        }
        var email = $("#id_email").val()
        var reg = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/
        if (email == "") {
            $("#tip").text("* 邮箱不能为空")
            return false
        } else if (!reg.test(email)) {
            $("#tip").text("* 邮箱格式不对，请输入合法邮箱，xxx@xxx.xx")
            return false
        }
        $("#tip").text("请在邮箱获取验证码")
        $.ajax({
            url: "{% url 'send_verification_code' %}",
            type: "GET",
            data: {
                'email': email,
                'send_for': 'register_code',
            },
            cache: false,
            success: function (data) {
                if (data['status'] != 'success') {
                    alert(data['status'])
                }
            },
        })
        // 恢复注册按钮
        $("#btn_register").removeClass('disabled')
        $("#btn_register").attr('disabled', false)
        // 把发送验证码按钮变灰
        var old_text = $("#send_code").val()
        console.log(old_text)
        $("#send_code").addClass('disabled')
        $("#send_code").attr('disabled', true)
        // 倒计时发送验证码
        var time = 30
        var interval = setInterval(() => {
            if (time <= 0) {
                clearInterval(interval)
                $("#send_code").removeClass('disabled')
                $("#send_code").attr('disabled', false)
                $("#send_code").val(old_text)
                return false
            }
            var new_text = `${old_text}(${time})s`
            $("#send_code").val(new_text)
            time--
        }, 1000);

    })
</script>
{% endblock %}
